<template>
  <view class="page">
    <view class="ding">

      <view class="tx">
        <image style="width: 100%;height: 100%" :src="storedata.logo_url"></image>
      </view>

      <view class="name">{{ storedata.name }}</view>
    </view>

    <view class="kong">
      <navigator class="kong_kk" url="/packageD/yonghuguanli/yonghuguanli">
        <view class="kong_nk">
          <view>
            <image class="tx" src="/static/img/用户管理.png"></image>
          </view>
        </view>

        <view>用户管理</view>
      </navigator>

      <navigator class="kong_kk" url="/packageC/mendianguanli/mendianguanli">
        <view class="kong_nk">
          <view>
            <image class="mdgl_tp" src="/static/img/门店管理 .png"></image>
          </view>
        </view>

        <view>门店管理</view>
      </navigator>

      <navigator class="kong_kk" url="/packageA/youhuiquan/youhuiquan">
        <view class="kong_nk">
          <view>
            <image class="tx" src="/static/img/优惠券.png"></image>
          </view>
        </view>

        <view>优惠券</view>
      </navigator>


    </view>

    <view class="jyzk">
      <view class="jyzk_h1">经营状况</view>
      <view class="sjxzq">
        <view class="sjxzq_text" :style="dataindex==1?'color:#074CF3':''" :data-curdate="1" @click="getData">7日</view>
        <view class="sjxzq_text" :style="dataindex==2?'color:#074CF3':''" :data-curdate="2" @click="getData">15日</view>
        <view class="sjxzq_text" :style="dataindex==3?'color:#074CF3':''" :data-curdate="3" @click="getData">30日</view>
        <view class="sjxzq_text" :style="dataindex==4?'color:#074CF3':''" :data-curdate="4" @click="getData">60日</view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.house_order_num }}</view>
          <view class="jyzk_text1">支付订单数</view>
        </view>
        <view>
          <view>{{ statistics.house_order_sumprice }}</view>
          <view class="jyzk_text1">支付总金额（元）</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>0</view>
          <view class="jyzk_text1">营业流水（元）</view>
        </view>
        <view class="jyzk_kk4">
          <view>0</view>
          <view class="jyzk_text1">今日收入（元）</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.sum_wechatPay }}</view>
          <view class="jyzk_text1">微信支付</view>
        </view>
        <view class="jyzk_kk5">
          <view>{{ statistics.sum_balance }}</view>
          <view class="jyzk_text1">余额支付</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.store_uv }}</view>
          <view class="jyzk_text1">访客数</view>
        </view>
        <view class="jyzk_kk3">
          <view>{{ statistics.house_uv }}</view>
          <view class="jyzk_text1">访问量</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.sum_house_refund }}</view>
          <view class="jyzk_text1">退款金额（元）</view>
        </view>
        <view class="jyzk_kk4">
          <view>{{ statistics.house_count }}</view>
          <view class="jyzk_text1">包间数量</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {wodestatisticsFromStoreId} from "@/common/api.js"

var app = getApp();
const util = require("@/common/util.js")
export default {
  data() {
    return {
      dataindex: 1,
      start_date: '2024-05-10',
      end_date: '2024-05-10',
      statistics: {},
      storedata: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (app.globalData.store_id) {
      this.storedata = app.storedata
      this.getDate(1)
      this.getstatistics()
    } else {
      uni.showModal({
        title: '提示',
        content: '请先选择门店',
        success: function (res) {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    getstatistics() {
      const paramData = {
        checked: 1,
        start_date: this.start_date,
        end_date: this.end_date,
        store_id: app.globalData.store_id
      }
      uni.showLoading({
        title: '加载中...'
      });
      wodestatisticsFromStoreId(paramData, (res => {
        this.setData({
          statistics: res.data.data
        })
        uni.hideLoading();
      }))
    },
    getData(option) {
      const curDate = option.currentTarget.dataset.curdate
      this.dataindex = curDate
      this.getDate(curDate)
      this.getstatistics()
    },
    getDate(curDate) {
      if (curDate == 1) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (7 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      } else if (curDate == 2) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (15 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      } else if (curDate == 3) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (30 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      } else if (curDate == 4) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (60 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      }
    }
  }
};
</script>
<style>
.page {
  background-color: rgb(243, 243, 243);
}

.ding {
  height: 100rpx;
  display: flex; /* 使用Flexbox布局 */
  align-items: center;
  margin: 20rpx 20rpx 20rpx 20rpx;
  color: rgb(209, 164, 41);
}

.tx {
  width: 70rpx;
  height: 70rpx;
}

.name {
  margin-left: 30rpx;
}

.kong {
  margin: 20rpx 20rpx 20rpx 20rpx;
  background-color: rgb(255, 255, 255);
  height: 180rpx;
  border-radius: 10rpx; /* 设置边框圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.kong_kk {
  margin-right: 40rpx;
}

.kong_nk {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.mdgl_tp {
  width: 70rpx;
  height: 70rpx;
}

.jyzk {
  margin: 20rpx 20rpx 20rpx 20rpx;
  padding: 20rpx 0 0 20rpx;
  background-color: rgb(255, 255, 255);
  height: 60vh;
  border-radius: 10rpx; /* 设置边框圆角 */
}

.jyzk_h1 {
  color: rgb(73, 73, 73);
}

.sjxzq {
  margin-top: 25rpx;
  width: 95%;
  height: 50rpx;
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  align-items: center;
  border: 1px solid rgb(204, 199, 199);
  border-radius: 100rpx; /* 设置边框圆角 */
}

.sjxzq_text {
  color: rgb(0, 0, 0);
  margin: 0 8% 0 8%;
  font-size: 29rpx;
}

.jyzk_kk {
  display: flex;
  margin: 20rpx 60rpx 20rpx 40rpx;
  color: rgb(241, 0, 0);
}

.jyzk_kk2 {
  margin-right: 200rpx;
}

.jyzk_kk3 {
  margin-left: 50rpx;
}

.jyzk_kk4 {
  margin-left: -50rpx;
}

.jyzk_kk5 {
  margin-left: 20rpx;
}

.jyzk_text1 {
  color: rgb(114, 110, 110);
  font-size: 24rpx;
  margin-top: 20rpx;
}
</style>
